import QSelect from '@teld/q-components/Select';
// import { QItem, QItemSection } from '@teld/q-components/Item';
import TItem from 't/basic/item';
import TItemSection from 't/basic/item-section';

import { commonProps } from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import _, { forIn } from 'lodash';

import {
  date,
  debounce,
  dom,
  setCssVar,
  useQuasar,
  scroll,
} from '@teld/q-components';

import {
  useClipProps,
  dateFilterOptsLang,
} from 't/bussiness/quick-filter/use-quick-filter';
export default defineComponent({
  props: {
    ...commonProps,
    ...useClipProps,
    optionsPosition: {
      type: String,
      default: 'top',
    },
  },
  emits: ['filterChanged'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const modelValue = computed(() => {
      return props.clips[0];
    });

    function emitFilterChanged() {
      if (modelValue.value._isSetValueFlag) {
        delete modelValue.value._isSetValueFlag;
        return;
      }
      emit('filterChanged');
    }

    function displayText(val) {
      return _.find(selectOpts.value, { value: val })?.label;
    }

    const popupShow = ref(false);

    const CLEAR_ITEM_VALUE = '_CLEAR_ITEM_';
    const selectOpts = ref([
      ...dateFilterOptsLang($q.lang.quickFilter).filter(item => item.value),
      {
        label: $q.lang.quickFilter?.clear || '清除',
        value: CLEAR_ITEM_VALUE,
        getDateFilter() {
          return [];
        },
      },
    ]);

    return () => {
      return (
        <QSelect
          // ref={refSelect}
          optionsPosition={props.optionsPosition}
          // style='flex:1;'
          class={[
            'tr-select-noborder mobile-select-clip',
            popupShow.value && 'popupShow',
            modelValue.value && 'unSelected',
          ]}
          // dropdown-icon={`${TComponents?.IconList?.common ?? 'fas dx-icon'} ${TComponents?.IconList?.arrowDown ?? 'icon-t-arrow-down'} arrow`}
          borderless
          emit-value
          multiple={props.isMultiple}
          map-options
          // clearable
          v-model={modelValue.value.value}
          onUpdate:modelValue={val => {
            emitFilterChanged();
          }}
          onPopupShow={() => {
            popupShow.value = true;
          }}
          onPopupHide={() => {
            popupShow.value = false;
          }}
          options={selectOpts.value}
        >
          {{
            option({ itemProps, opt, selected, toggleOption }) {
              return (
                <div
                  class={[
                    'quick-filter_select_options',
                    selected && 'selected',
                    CLEAR_ITEM_VALUE === opt.value && 'clearItemContainer',
                  ]}
                  onClick={() => {
                    if (opt.value === CLEAR_ITEM_VALUE) {
                      toggleOption(null);
                    } else {
                      toggleOption(opt);
                    }
                  }}
                >
                  {CLEAR_ITEM_VALUE === opt.value ? (
                    <TItem class='clearItem'>
                      <TItemSection>
                        <div>{opt.label}</div>
                      </TItemSection>
                    </TItem>
                  ) : (
                    <TItem>
                      <TItemSection>
                        <div>{opt.label}</div>
                      </TItemSection>
                      <TItemSection side>
                        <div>
                          {false && opt.label && selected && (
                            <TIcon name='fas dx-icon icon-t-check-fine'></TIcon>
                          )}
                        </div>
                      </TItemSection>
                    </TItem>
                  )}
                </div>
              );
            },
            selected() {
              return (
                <div
                  class={[
                    'selected',
                    popupShow.value && 'popupShow',
                    !modelValue.value.value && 'unSelected',
                  ]}
                >
                  {modelValue.value.value ? (
                    <div class={['item']}>
                      {displayText(modelValue.value.value)}
                    </div>
                  ) : (
                    <div class={['placeholder']}>{props.label}</div>
                  )}
                  {/* <div class={['arrow']}>
                    <TIcon
                      style='font-size:10px'
                      name='fas dx-icon icon-teld-arrow-bottom-thin arrow'
                    ></TIcon>
                  </div> */}
                </div>
              );
            },
          }}
        </QSelect>
      );
    };
  },
});
